<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<view class="u-avatar-wrap">
					<!-- <image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image> -->
					<image class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image>
				</view>
				<!-- <u-button @click="chooseAvatar">选择图片</u-button> -->
				<button class="submit" @click="chooseAvatar">修改头像</button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'

	import {
		pathToBase64,
		base64ToPath
	} from '@/static/js/photoUtils.js'

	export default {
		data() {
			return {
				avatar: '',
				iconBase64: ''
			}
		},
		onLoad(option) {
			this.avatar = option.image
		},
		created() {
			uni.$on('uAvatarCropper', path => {
				this.avatar = path
				// this.urlTobase64(path)
				this.getImageBase64(path)
			})
			// uni.$on('uAvatarCropper', this.getimg)
		},
		onUnload() {
			// uni.$off('uAvatarCropper', this.getimg)
			uni.$off('uAvatarCropper')
		},
		methods: {
			getimg(path) {
				this.avatar = path
				this.urlTobase64(path)
				console.log(path);
			},
			imageToBase64(file) {
				var reader = new FileReader()
				reader.readAsDataURL(file)
				reader.onload = () => {
					console.log('file 转 base64结果：' + reader.result)
					this.iconBase64 = reader.result
				}
				reader.onerror = function(error) {
					console.log('Error: ', error)
				}
			},
			urlTobase64(url) {
				var userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				var toBase64Url;
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						// toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						api.modifyInformation(userInfo.access_token, 'res.partner',
							'_api_editor_personal_information', userInfo.uid, userInfo.account_type, {
								image_1920: base64
							}).then(res => {
							if (res.errcode == 0) {
								uni.navigateBack()
							}
							// uni.navigateTo({
							// 	url: '/pagesB/mine/worker/PersonalInformation'
							// })
						})
					}
				});
			},
			getImageBase64(file) {
				var userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				uni.getFileSystemManager().readFile({
					filePath: file, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: (res) => { //成功的回调
						var base64 = res.data;
						api.modifyInformation(userInfo.access_token, 'res.partner',
							'_api_editor_personal_information', userInfo.uid, userInfo.account_type, {
								image_1920: base64
							}).then(res => {
							if (res.errcode == 0) {
								uni.navigateBack()
							}
						})
					}
				});
			},
			chooseAvatar() {
				this.$u.route({
					url: '/pagesB/mine/worker/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			qualityChange(index) {
				this.quality = index == 0 ? 0.3 : index == 1 ? 0.7 : 1;
			},
			styleChange(index) {
				if (index == 0) {
					this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 200;
					this.boundStyle = {
						lineWidth: 8,
						borderColor: this.$u.color['error'],
						mask: 'rgba(0, 0, 0, 0.8)'
					}
				} else {
					this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 400;
					this.boundStyle = {
						lineWidth: 4,
						borderColor: 'rgb(245, 245, 245)',
						mask: 'rgba(0, 0, 0, 0.35)'
					}
				}
			},
			// 预览图片
			preAvatar() {
				wx.previewImage({
					current: '', // 当前显示图片的 http 链接
					urls: [this.avatar] // 需要预览的图片 http 链接列表
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-demo {
		margin-top: 20rpx;
	}

	.wrap {
		padding: 24rpx;
	}

	.u-avatar-wrap {
		overflow: hidden;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
	}

	.u-avatar-demo {
		width: 240rpx;
		height: 240rpx;
		// border-radius: 100rpx;
	}

	.submit {
		background: #D73C4B;
		color: #fff;
		width: 40%;
		margin-top: 20rpx;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
	}
</style>
